<template>
  <layout title="上传交付物" :showD="false" :showBack="true" :showHome="false">
    <main>
      <div class="task">
        <span class="title">{{ title }}</span>
        <span v-if="status === '1'" class="changeColor">进行中</span>
        <span v-else-if="status === '2'" class="changeColor">已完成</span>
        <span v-else-if="status === '3'" class="changeColor">已关闭</span>
      </div>
      <div class="upload">
        <input
          v-if="status === '1' && userStatus === '0'"
          type="text"
          placeholder="请输入交付物备注..."
        />
        <input
          v-else-if="status === '1' && userStatus === '1'"
          type="text"
          placeholder="交付物备注..."
        />
        <input
          v-else-if="status !== '1'"
          type="text"
          placeholder="交付物备注..."
          readonly
        />
        <div class="photo">
          <van-uploader
            v-if="status === '1'"
            v-model="fileList"
            multiple
            :max-count="2"
          />
          <van-uploader
            v-else
            disabled
            v-model="fileList"
            multiple
            :max-count="2"
          />
          <p v-if="status === '1' && userStatus === '0'" class="text">
            请上传交付物
          </p>
        </div>
      </div>

      <van-sticky :offset-top="520">
        <van-button
          v-if="status === '1'"
          round
          color="#fab57c"
          type="info"
          block
          @click="submit"
          >提交</van-button
        >
        <van-button
          v-if="status === '2'"
          round
          color="#fab57c"
          type="info"
          block
          @click="pay"
          >结算订单</van-button
        >
      </van-sticky>
    </main>
  </layout>
</template>

<script>
import { editTaskApi } from "@/apis/hallApi";
import { editUserApi, getTaskApi, UserApi } from "@/apis/signApi";
export default {
  data() {
    return {
      fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      userId: "",
      userInfo: {},
      title: "",
      status: "",
      id: "",
      userStatus: "",
    };
  },
  created() {
    this.title = this.$route.query.title;
    this.status = this.$route.query.status;
    this.id = this.$route.query.id;
    this.userStatus = this.$route.query.userStatus;
    if (this.status === "1" && this.userStatus === "0") {
      this.fileList = [];
    }
    this.getUser();
  },
  methods: {
    async getUser() {
      this.userId = this.$store.getters["common/userId"];
      const result = await UserApi(this.userId);
      this.userInfo = result;
    },
    async submit() {
      if (this.userInfo.active === 2 && this.userInfo.sign === 1) {
        if (this.fileList.length === 0) {
          this.$toast.fail("请选择需要上传的交付物");
        } else {
          if (this.userStatus === "1") {
            this.$dialog
              .confirm({
                title: "修改交付物提醒",
                message: "只允许修改一次交付物，请确定！",
                cancelButtonText: "取消",
              })
              .then(async () => {
                await editTaskApi(this.id, { status: 2 });
                this.$router.push("/list");
              })
              .catch(() => {});
          } else {
            await editTaskApi(this.id, { userStatus: 1 });
            this.$dialog
              .alert({
                title: "上传成功提醒",
                message: "已经成功上传交付物~~~~，去列表查看哦",
              })
              .then(() => {
                this.$router.push("/list");
              });
          }
        }
      } else {
        this.$toast.fail("清先完成注册流程");
      }
    },
    pay() {
      if (this.userInfo.active === 2 && this.userInfo.sign === 1) {
        if (this.userStatus === "1") {
          this.$dialog
            .confirm({
              title: "结算交易提醒",
              message: "结算后将于24小时内到账到钱包，订单将关闭！",
              cancelButtonText: "取消",
            })
            .then(async () => {
              const result = await getTaskApi(this.id)
              let money = Number(this.userInfo.money) + Number(result.price)
              await editUserApi(this.userId, {money: money})
              await editTaskApi(this.id, { status: 3 });
              this.$router.push("/list"); 
            })
            .catch(() => {});
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/style/common.less";
main {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #f9fafb;
  > .task {
    padding: 0 20px;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    width: 75vw;
    height: 50px;
    line-height: 50px;
    display: flex;
    border-radius: 20px;
    background-image: linear-gradient(to right, #fae5d2, #ffc18e);
    justify-content: space-between;
    margin-bottom: 15px;
    > .title {
      font-size: 0.8rem;
      font-weight: 600;
      color: @c1;
    }
    > .changeColor {
      font-size: 0.7rem;
      color: @a4;
      font-weight: 600;
    }
  }
  > .upload {
    font-size: 0.8rem;
    margin: auto;
    padding: 10px 5px;
    background: #fff;
    > input {
      border: #999;
      outline: none;
      width: 330px;
      height: 180px;
      background: #f9fafb;
      margin-bottom: 15px;
    }
    > .photo {
      .text {
        color: @c3;
      }
    }
  }
  .van-button {
    margin: auto;
    width: 90vw;
  }
}
</style>
